<template>
	<div class="detail_content">
		<!-- 返回 -->
		<HyPageHeader :title="detail.title" />
		<div
			class="content"
			v-loading="loading"
			:style="{
				height: isShowFooter && !loading ? 'calc(100vh - 240px)' : 'calc(100vh - 190px)',
			}"
		>
			<!--应用信息-->
			<HyCard title="应用信息">
				<app-unit :message="detailInfo.implementation"></app-unit>
			</HyCard>
			<kouJibm :message="detailInfo.implementation" v-if="pageType != 3"></kouJibm>
			<!-- 变更信息 -->
			<HyCard
				title="变更信息"
				v-if="pageType != 3 && detailInfo.implementationChangeLog?.change && detailInfo.implementationChangeLog?.change?.status == 3"
			>
				<cheng-info :message="detailInfo.implementationChangeLog?.change"></cheng-info>
			</HyCard>
			<!-- 项目终止信息 -->
			<HyCard
				title="终止信息"
				v-if="pageType != 3 && detailInfo.implementationChangeLog?.terminate && detailInfo.implementationChangeLog?.terminate?.status == 3"
			>
				<end-app :message="detailInfo.implementationChangeLog?.terminate"></end-app>
			</HyCard>
			<!-- 项目验收信息 -->
			<HyCard title="项目验收信息" v-if="pageType != 3 && detailInfo.implementation">
				<Accep :message="detailInfo.implementation?.appCheck" v-if="detailInfo.implementation?.appCheck"></Accep>
				<el-empty v-else description="暂无数据" />
			</HyCard>
			<!-- 抽检意见 -->
			<HyCard title="抽检意见" v-if="pageType == 2">
				<Unit :des-data="detailInfo.spotCheck" :column="1" v-if="detailInfo.appSpot" />
				<el-empty v-else description="暂无数据" />
			</HyCard>
			<!-- 责任部门应用绩效自评 -->
			<HyCard title="责任部门应用绩效自评" v-if="pageType == 3 && !evalAcation">
				<Unit :des-data="detailInfo.selfMerits" :column="2" v-if="detailInfo.selfMerits" />
				<el-empty v-else description="暂无数据" />
			</HyCard>
			<HyCard title="责任部门应用绩效自评" v-if="pageType == 3 && evalAcation">
				<div class="imgList">
					<div class="listitem">
						<span>责任部门应用绩效自评:</span
						><TsyUploadFile
							type="submit"
							:fileType="['.rar', '.zip', '.docx', '.doc', '.pdf', '.jpg']"
							:fileSize="200"
							v-model="imgList.performance_comment"
						/>
					</div>
					<div class="listitem">
						<span>责任部门专项资金自评:</span
						><TsyUploadFile
							type="submit"
							:fileType="['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']"
							:fileSize="200"
							v-model="imgList.fund_comment"
						/>
					</div>
				</div>
			</HyCard>
		</div>
		<div class="foot-bar" v-if="isShowFooter && !loading">
			<el-button
				plain
				class="blue-button"
				@click="dialogFormVisible = true"
				v-if="pageType == 2 && (!detailInfo.implementation?.opinionStatus || detailInfo.implementation?.opinionStatus < 2)"
			>
				填写意见
			</el-button>

			<el-button plain class="blue-button" v-if="pageType == 3 && !evalAcation" @click="handleEval">应用绩效评价</el-button>
			<el-button plain class="blue-button" v-if="pageType == 3 && evalAcation" @click="handleSave">提交</el-button>
		</div>
		<advice-dialog
			v-if="dialogFormVisible"
			:hyFormConfig="hyFormConfig"
			:hyFormFields="hyFormFields"
			:hyFormDefault="hyFormDefault"
			:appCode="route.query.appCode"
			:implementationId="route.query.implementationId"
			:declareId="route.query.id"
			@handleCancel="closeDialog"
		>
		</advice-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import HyPageHeader from '/@/components/HyPageHeader/index.vue';
import HyCard from '/@/views/digitalList/detail/components/Card.vue';
import Unit from '../components/unit.vue';
import AppUnit from '/@/views/digitalImplement/detail/components/unit.vue';
import Accep from '/@/views/digitalImplement/detail/components/accep.vue';
import kouJibm from '/@/views/digitalImplement/detail/components/kouJibm.vue';
import ChengInfo from '/@/views/digitalImplement/detail/components/chengInfo.vue';
import EndApp from '/@/views/digitalImplement/detail/components/endApp.vue';
import AdviceDialog from '../components/adviceDialog.vue';
import { checkDataDetail, spotDetail, commentDetail, commentSave } from '/@/api/acceptance';
import TsyUploadFile from '/@/components/HyUpload/index.vue';
import { ElMessage } from 'element-plus';
import { useDict } from '/@/hooks/dict';
const detail = ref({
	title: '应用验收',
});
const route = useRoute();
const router = useRouter();

const evalBtn = ref(false);
const isShowFooter = computed(() => {
	if (
		(loadres.value &&
			pageType.value == 2 &&
			(!detailInfo.value.implementation?.opinionStatus || detailInfo.value.implementation?.opinionStatus < 2)) ||
		(loadres.value && pageType.value == 3 && evalBtn.value)
	) {
		return true;
	} else {
		return false;
	}
});
onMounted(() => {
	loading.value = true;
	pageType.value = route.query.pageType;
	detail.value.title = pageType.value == 1 ? '应用验收' : pageType.value == 2 ? '系统抽检' : '应用评价';
	if (route.query.state == 1) {
		evalBtn.value = true;
	}
	getDetailInfo(route.query.implementationId);
});

//数据
let detailInfo = ref({
	//抽检意见
	spotCheck: [
		{ label: '抽检状态：', text: '', key: 'result' },
		{ label: '抽检意见：', text: '', key: 'opinion' },
		{ label: '附件：', text: '', key: 'annex', type: 'file' },
	],
	//应用绩效自评
	selfMerits: [
		{ label: '责任部门应用绩效自评', files: [], key: 'countyName', type: 'image' },
		{ label: '责任部门专项资金自评', files: [], key: 'countyName', type: 'image' },
	],
	//状态
	status: '',
});
const dialogFormVisible = ref(false);
const hyFormConfig = computed(() => {
	return {
		span: 24,
		offset: 0,
		labelWidth: '140px',
		type: 'submit',
	};
});
const { opinion_status: OPTIONSTATUS } = useDict('opinion_status');
const hyFormFields = ref({
	result: {
		type: 'select',
		label: '结果',
		required: true,
		options: OPTIONSTATUS.value.filter((item) => item.value != 1),
	},
	opinion: {
		required: true,
		type: 'textarea',
		label: '意见',
	},
});
const hyFormDefault = ref({
	result: '',
	opinion: '',
});
const closeDialog = (flag) => {
	dialogFormVisible.value = false;
	if (flag == 1) {
		getDetailInfo(route.query.implementationId);
	}
};
const loading = ref(false);
const loadres = ref(true);
const getDetailInfo = (id: String) => {
	if (pageType.value == 3) {
		commentDetail({ implementationId: id })
			.then((res) => {
				if (res.ok) {
					detailInfo.value = res.data;
					if (res.data && JSON.stringify(res.data.appComent) != '{}') {
						imgList.value = res.data.appComent;
						//评价
						const appComent = [
							{ label: '责任部门应用绩效自评', files: [], key: 'countyName', type: 'image' },
							{ label: '责任部门专项资金自评', files: [], key: 'countyName', type: 'image' },
						];
						appComent[0].files = res.data.appComent?.performance_comment;
						appComent[1].files = res.data.appComent?.fund_comment;
						detailInfo.value.selfMerits = appComent;
					}
				}
			})
			.then(() => {
				loading.value = false;
			})
			.catch(() => {
				loading.value = false;
				loadres.value = false;
			});
	} else if (pageType.value == 1) {
		checkDataDetail({ implementationId: id, reallyId: '-3' })
			.then((res) => {
				if (res.ok) {
					detailInfo.value = res.data;
					if (res.data && res.data.appSpot) {
						//抽检意见
						const spotCheck = [
							{ label: '抽检状态：', text: '', key: 'result' },
							{ label: '抽检意见：', text: '', key: 'opinion' },
							{ label: '附件：', text: '', key: 'annex', type: 'file' },
						];
						spotCheck.forEach((item) => {
							item.text = res.data.appSpot[item.key];
						});
						detailInfo.value.spotCheck = spotCheck;
					}
					// spotCheck
				}
			})
			.then(() => {
				loading.value = false;
			})
			.catch(() => {
				loading.value = false;
				loadres.value = false;
			});
	} else {
		spotDetail({ implementationId: id })
			.then((res) => {
				if (res.ok) {
					detailInfo.value = res.data;
					if (res.data && res.data.appSpot) {
						//抽检意见
						const spotCheck = [
							{ label: '抽检状态：', text: '', key: 'result' },
							{ label: '抽检意见：', text: '', key: 'opinion' },
							{ label: '附件：', text: '', key: 'annex', type: 'file' },
						];
						spotCheck.forEach((item) => {
							if (item.key == 'annex') {
								item.text = res.data.annex;
							} else {
								item.text = res.data.appSpot[item.key];
							}
						});
						detailInfo.value.spotCheck = spotCheck;
					}
					// spotCheck
				}
			})
			.then(() => {
				loading.value = false;
			})
			.catch(() => {
				loading.value = false;
				loadres.value = false;
			});
	}
};
const pageType = ref(1);

//评价
const imgList = ref({
	performance_comment: [],
	fund_comment: [],
});
const evalAcation = ref(false);
const handleEval = () => {
	console.log(detailInfo.value.selfMerits);
	evalAcation.value = true;
};
const handleSave = () => {
	console.log(imgList.value);
	if (imgList.value.performance_comment.length == 0 || imgList.value.fund_comment.length == 0) {
		return ElMessage.error('请上传文件');
	} else {
		let performanceComment = [];
		let fundComment = [];
		imgList.value.performance_comment.forEach((item) => {
			performanceComment.push({
				id: item.id,
				url: item.url,
				name: item.name,
			});
		});
		imgList.value.fund_comment.forEach((item) => {
			fundComment.push({
				id: item.id,
				url: item.url,
				name: item.name,
			});
		});
		const params = {
			declareId: route.query.id,
			implementationId: route.query.implementationId,
			appCode: route.query.appCode,
			performance_comment: performanceComment,
			fund_comment: fundComment,
		};
		commentSave(params).then((res) => {
			if (res.ok) {
				ElMessage.success('操作成功');
				setTimeout(() => {
					router.back();
				}, 300);
			}
		});
	}
};
</script>

<style lang="scss" scoped>
.detail_content {
	width: 100%;
	padding: 15px;
	.content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		// height: calc(100vh - 250px);
		overflow-y: auto;
	}
	.goback {
		width: 100%;
	}
	.label-title {
		font-weight: bold;
		margin-bottom: 10px;
	}
	.foot-bar {
		background-color: #fff;
		border-top: 5px solid rgb(241, 241, 241);
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	}
	.imgList {
		display: flex;
		justify-content: space-between;
		.listitem {
			display: flex;
		}
	}
	:deep(.h-full) {
		height: auto;
	}
}
</style>
